<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>COLLABORATIVE DOCUMENT EDITOR</title>
</head>

<body>
    <div id="fileEdit"></div>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        #fileEdit {
            width: 100%;
            height: 100vh;
        }
        #header-logo i {
            display: none;
        }
    </style>
    <!-- 页面引入ONLYOFFICE Server端的api.js -->
    <script type="text/javascript" src="http://101.200.164.160:9001/web-apps/apps/api/documents/api.js"></script>
    <script>
        // 获取当前 URL 的查询字符串部分
        const queryString = window.location.search;
        // 使用 URLSearchParams 解析查询字符串
        const urlParams = new URLSearchParams(queryString);
        const fileURL = urlParams.get('fileURL');
        const editName = urlParams.get('editName');
        const userID = Math.floor(100000 + Math.random() * 900000).toString();
        const editGroup = urlParams.get('editGroup');
        const target= urlParams.get('target');
        const fileTitle=target?.substring(target.lastIndexOf('/') + 1, target.indexOf('?') !== -1 ? target.indexOf('?') : target.length);
        const fileType = fileTitle?.substring(fileTitle.lastIndexOf('.') + 1, fileTitle.length);
        console.log({
            fileURL,
            editName,
            userID,
            editGroup,
            target,
            fileTitle,
            fileType
        })

        let editorConfig = {
            "lang": "zh-CN",//设置ONLYOFFICE编辑器语言为中文
            //保存文档时最终的回调接口，用于保存在线编辑的文件到存储
            
            "lang": "zh-CN",//设置ONLYOFFICE编辑器语言为中文
            "mode": "edit",//设置只读时使用的配置，不加则默认表示允许编辑（只读时不需要填不加callbackUrl配置）
            "customization": {
                "anonymous": { // set name for anonymous user
                    "request": false, // enable set name
                    "label": "aaa" // postfix for user name
                },
            },
            user: {
                id: userID || "123456", // user id
                name: editName || "尤梓宇", // user name
                group: editGroup || "GroupName" // for customization.reviewPermissions or permissions.reviewGroups or permissions.commentGroups. Can be multiple groups separated by commas (,) : 'Group1' or 'Group1,Group2'
            },

        }

        /*
        ONLYOFFICE编辑器有三种主要外观，针对不同用途进行了优化,可通过type属性予以配置：
          desktop，针对桌面计算机浏览器中的显示进行了优化；
          mobile，针对移动设备浏览器中的显示进行了优化；
          embedded，针对将文档嵌入网页进行了优化。
         */
        new DocsAPI.DocEditor("fileEdit", // 显示ONLYOFFICE编辑器的DOM元素id
            {
                type: "mobile",//编辑器外观，
                width: "100%",
                height: "100%",
                document: {
                    title: fileTitle || "test.docx",//文件标题
                    url: target || "http://123.121.147.7:88/ve/pdf/rp/2024/12/06/20241206091335164182.docx",//文件地址
                    fileType: fileType || "docx",//文件类型
                    //   fileType:extName,
                    key: "a1113",//如果要多人协作编辑一个文件，可对每个文件设置不同的key。
                    permissions: {//编辑器权限配置
                        "download": true,
                        "edit": true,
                        "fillForms": true,
                        "print": true,
                    }
                },

                editorConfig: editorConfig
            });
    </script>
</body>

</html>
